<!-- 新建实物奖品 -->
<template>
  <a-drawer v-model:visible="vdata.visible" :maskClosable="false" :title="vdata.isAdd? '新增活动模板' : '修改活动模板'" width="40%">
    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      labelAlign="left"
      :rules="vdata.rules"
      :colon="false"
      layout="vertical"
      :wrapper-col="{span: 22}"
      style="margin-top: 30px; margin-left: 20px;margin-bottom:30px;"
    >
      <a-row justify="space-between" type="flex">
        <a-col :span="12">
          <a-form-item label="活动模板名称" name="templateName">
            <a-input
              v-model:value="vdata.saveObject['templateName']"
              placeholder="请输入活动模板名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="活动模板编号" name="activityTemplateNo">
            <a-input
              v-model:value="vdata.saveObject['activityTemplateNo']"
              placeholder="请输入活动模板编号"
              :disabled="!vdata.isAdd"
              maxlength="8"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="space-between" type="flex">
        <!-- <a-col :span="12">
          <a-form-item label="活动类型" name="activityTypeNo">
            <a-select v-model:value="vdata.saveObject['activityTypeNo']" placeholder="请选择活动类型">
              <a-select-option :value="1">支付宝满减</a-select-option>
            </a-select>
          </a-form-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-item label="活动类型" name="activityTypeNo">
            <a-select
              v-model:value="vdata.saveObject['activityTypeNo']"
              placeholder="请选择活动类型"
              :options="vdata.activityType"
              :field-names="{ label: 'activityTypeName', value: 'activityTypeNo' }"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="活动模板图片" name="templateImg" :wrapper-col="{span: 23}">
            <GzUpload v-model:src="vdata.saveObject['templateImg']" bizType="activity" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="活动配置视频" name="settingVideoUrl" :wrapper-col="{span: 23}">
            <GzUploadVideo v-model:src="vdata.saveObject['settingVideoUrl']" bizType="activity" :isTrue="false" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="参与流程视频" name="participateVideoUrl" :wrapper-col="{span: 23}">
            <GzUploadVideo v-model:src="vdata.saveObject['participateVideoUrl']" bizType="activity" :isTrue="false" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="备注" name="remark" :wrapper-col="{span: 23}">
            <a-textarea v-model:value="vdata.saveObject['remark']" placeholder="请输入备注" :rows="3" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right: 8px" @click="onClose">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
// import {req} from '@/api/manage'
import{$activityTemplateAdd,$activityTemplateEdit,$apiActivityType} from '@/api/activityManage/activityTemplate/index'
import { reactive, ref, defineExpose, getCurrentInstance } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
const formRef = ref()

const props = defineProps(['callBackFunc'])

const vdata:any = reactive({
  isAdd: false, // 新增OR修改
  visible: false,
  btnLoading: true,
  saveObject: {},
  rules: {
    templateName: [{ required: true, message: '活动模板名称不能为空', trigger: 'blur' },],
    activityTemplateNo: [{ required: true, message: '活动模板编号不能为空', trigger: 'blur' },],
    activityTypeNo: [{ required: true, message: '活动类型不能为空', trigger: 'blur' },],
    templateImg: [{ required: true, message: '活动模板图片不能为空', trigger: 'blur' },],
    previewImg: [{ required: true, message: '预览小程序图片不能为空', trigger: 'blur' },],
    settingVideoUrl:[{ required: false,} ],//   PC活动配置视频URL
    participateVideoUrl:[{ required: false,},],//用户参与活动视频URL
  },
})

function handleOkFunc() {
  formRef.value.validate().then(() => {
    vdata.btnLoading = true
    if(vdata.isAdd){  // 新增
      $activityTemplateAdd(vdata.saveObject).then(res=>{
        $infoBox.message.success('新增成功！')
        props.callBackFunc()
        onClose()
        vdata.btnLoading = false
      }).catch(()=>{
        vdata.btnLoading = false
      })
    }else{  // 修改
      $activityTemplateEdit({ ...vdata.saveObject }).then(res=>{
        $infoBox.message.success('修改成功！')
        props.callBackFunc()
        onClose()
        vdata.btnLoading = false
      }).catch(()=>{
        vdata.btnLoading = false
      })
    }
  }).catch(() => {})
}

function onClose() {
  vdata.visible = false
}

function show(record) {
  vdata.isAdd = !record
  vdata.btnLoading = false
  // 重置数据
  vdata.saveObject = {}
  if (formRef.value !== undefined) {
    formRef.value.resetFields()
  }
  // 活动类型
  getActivityType()
  if(!vdata.isAdd){ // 修改
    vdata.saveObject = { ...record }
  }
  vdata.visible = true
}
// 获取活动类型
function getActivityType(){
  $apiActivityType({}).then(res => {
    vdata.activityType = res.records
  })
}

defineExpose({
  show,
})
</script>